<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.js"></script>
    <script>
        const CART_LIST_URL = "http://localhost:8080/carts/list"
        $(function () {
            initData();
        })

        function initData() {
            let data = {
                memberId: 1,
                page: 1,
                size: 10
            }
            $.get(CART_LIST_URL, data, function (result) {
                if (result.status === 200 && result.data.length > 0) {
                    let cartsList = result.data
                    for (const cart of cartsList) {
                        // dom操作
                        $("#carts")
                            .append(
                                $("<tr>")
                                    .attr("cart_id", cart.cartId)
                                    .append(
                                        $("<td>")
                                            .append($("<p >").text(cart.productName))
                                    )
                                    .append(
                                        $("<td>")
                                            .append($("<p>").text(cart.productPrice))
                                    )

                                    .append(
                                        $("<td>")
                                            .append($("<input type='number'>").val(cart.quantity))
                                    )

                                    .append(
                                        $("<td>")
                                            .append($("<p>").text(cart.productPrice * cart.quantity))
                                    )
                            )
                    }
                }
            })
        }
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="main">
        <table id="carts" class="table table-bordered">
            <tr>
                <th>商品信息</th>
                <th>单价</th>
                <th>数量</th>
                <th>价格</th>
                <th>操作</th>
            </tr>
            <!--            <tr>-->
            <!--                <td>-->
            <!--                    <img src="" class="img-rounded">-->
            <!--                    <p>华为手机</p>-->
            <!--                </td>-->
            <!--                <td>-->
            <!--                    <p>100.00</p>-->
            <!--                </td>-->
            <!--                <td>-->
            <!--                    <button>-</button>-->
            <!--                    <input type="number" name="quantity" value="2">-->
            <!--                    <button>+</button>-->
            <!--                </td>-->
            <!--                <td>-->
            <!--                    <p>300</p>-->
            <!--                </td>-->
            <!--                <td>-->
            <!--                    <i class="glyphicon glyphicon-trash"></i>-->
            <!--                    <i class="glyphicon glyphicon-pencil"></i>-->
            <!--                </td>-->
            <!--            </tr>-->
        </table>
    </div>
</div>
</body>
</html>